<link rel="stylesheet" href="css/bootstrap.css" type="text/css"/>
<% include '/WEB-INF/includes/header.gtpl' %>

<div id="main" role="main">
<div class="main-content extra-width">

    <div class="wrapper">
        <%if(request.getAttribute('thanks')){%>
            <div class="alert-message success">
                <a class="close" href="#">×</a>
                <p><%println(request.getAttribute('thanks') ?: "") %></p>
            </div>
        <%}%>

        <p>As part of the menu we need you to select your starter, main, and desert</p>

        <form action="food" method="POST">
            <div class="clearfix">
                <label for="name">Name:</label>
                <div class="input">
                    <input type="text" name="name" id="name"/>
                </div>
            </div>
            <div class="clearfix">
                <label for="appies">Appetizer:</label>
                <div class="input">
                    <select class="appies" name="appies" id="appies">
                        <option value="Fish Salad">Fish Salad</option>
                        <option value="Fish Soup">Fish Soup</option>
                    </select>
                </div>
            </div>
            <div class="clearfix">
                <label for="main-food">Main:</label>
                <div class="input">
                    <select class="main" name="main" id="main-food">
                        <option value="Veg option">Veg Option</option>
                        <option value="Meat option">Meat Option</option>
                    </select>
                </div>
            </div>
            <div class="clearfix">
                <label for="dessert">Dessert:</label>
                <div class="input" >
                    <select class="dessert" name="dessert" id="dessert">
                        <option value="Chocolate">Chocolate</option>
                        <option value="Fish Fingers">Fish fingers</option>
                    </select>
                </div>
            </div>

            <div class="clearfix">
                <div class="input" >
                    <button class="btn primary">Submit your selection</button>
                </div>
            </div>


        </form>
    </div>
    <% if(request.getAttribute('allPeople') ){ %>
    <div class="wrapper top-margin">
        <h3 class="heading">What people are eating</h3>
            <table class="zebra-striped">
                <thead>
                    <tr><th>Name</th>  <th>Appie</th> <th>Main</th> <th>Dessert</th></tr>
                </thead>
                <%
                    request.getAttribute('allPeople').each{
                        println """<tr>
                                        <td>$it.name</td>
                                        <td>$it.appies</td>
                                        <td>$it.main</td>
                                        <td>$it.dessert</td>
                                </tr>"""
                    }
                %>
            </table>
    </div>
    <%}%>

</div>
</div>


<% include '/WEB-INF/includes/footer.gtpl' %>
<script type="text/javascript">
jQuery(window).load(function() {
    jQuery('.top-links li a').removeClass('active');
    jQuery('.top-links li a.food_menu').addClass('active');

    jQuery('td button').click(function(e){
        var parentTD = jQuery(jQuery(e.target).closest('td'))
        var id = parentTD.data('id');
        jQuery.post("deletePerson", { id: id}, function(e){
            parentTD.closest('tr').remove();
        });
    })

});
</script>